<template>
  <el-dialog
    title="设置"
    :visible.sync="visible"
    width="600px"
    :before-close="handleClose"
    class="settings-dialog"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <div class="settings-container">
      <!-- 左侧导航 -->
      <div class="settings-sidebar">
        <div 
          v-for="(section, index) in sections" 
          :key="index"
          class="nav-item"
          :class="{ active: activeSection === index }"
          @click="activeSection = index"
        >
          <span>{{ section.title }}</span>
        </div>
      </div>

      <!-- 右侧内容 -->
      <div class="settings-main">
        <!-- 个人信息设置 -->
        <div v-show="activeSection === 0" class="settings-panel">
          <div class="form-section">
            <div class="form-group">
              <label class="form-label">头像</label>
              <div class="avatar-section">
                <el-avatar
                  :size="80"
                  :src="userInfo.avatar"
                  shape="circle"
                  class="user-avatar"
                >
                  <i class="el-icon-user-solid"></i>
                </el-avatar>
                <div class="avatar-actions">
                  <el-button size="small" type="primary" icon="el-icon-upload">上传头像</el-button>
                  <el-button size="small" icon="el-icon-delete">移除</el-button>
                </div>
              </div>
            </div>
            
            <div class="form-group">
              <label class="form-label">用户名</label>
              <el-input
                v-model="userInfo.username"
                placeholder="请输入用户名"
                class="form-input"
                disabled
              ></el-input>
            </div>
            
            <div class="form-group">
              <label class="form-label required">昵称</label>
              <el-input
                v-model="userInfo.nickname"
                placeholder="请输入昵称"
                class="form-input"
                maxlength="20"
                show-word-limit
              ></el-input>
            </div>
            
            <div class="form-group">
              <label class="form-label">性别</label>
              <el-radio-group v-model="userInfo.gender" class="gender-group">
                <el-radio label="male">男</el-radio>
                <el-radio label="female">女</el-radio>
              </el-radio-group>
            </div>
            
            <div class="form-group">
              <label class="form-label">个性签名</label>
              <el-input
                v-model="userInfo.signature"
                type="textarea"
                placeholder="请输入个性签名"
                :rows="3"
                class="form-textarea"
                maxlength="64"
                show-word-limit
              ></el-input>
            </div>
          </div>
        </div>

        <!-- 用户设置 -->
        <div v-show="activeSection === 1" class="settings-panel">
          <div class="form-section">
            <div class="setting-item">
              <label class="setting-label">消息提醒</label>
              <el-switch
                v-model="messageSettings.notification"
                active-color="#409EFF"
                inactive-color="#dcdfe6"
              ></el-switch>
            </div>
            
            <div class="setting-item">
              <label class="setting-label">声音提醒</label>
              <el-switch
                v-model="messageSettings.sound"
                active-color="#409EFF"
                inactive-color="#dcdfe6"
              ></el-switch>
            </div>
            
            <div class="setting-item">
              <label class="setting-label">震动提醒</label>
              <el-switch
                v-model="messageSettings.vibration"
                active-color="#409EFF"
                inactive-color="#dcdfe6"
              ></el-switch>
            </div>
          </div>
        </div>

        <!-- 修改密码 -->
        <div v-show="activeSection === 2" class="settings-panel">
          <div class="form-section">
            <div class="form-group">
              <label class="form-label required">当前密码</label>
              <el-input
                v-model="passwordForm.currentPassword"
                type="password"
                placeholder="请输入当前密码"
                class="form-input"
                show-password
              ></el-input>
            </div>
            
            <div class="form-group">
              <label class="form-label required">新密码</label>
              <el-input
                v-model="passwordForm.newPassword"
                type="password"
                placeholder="请输入新密码"
                class="form-input"
                show-password
              ></el-input>
            </div>
            
            <div class="form-group">
              <label class="form-label required">确认新密码</label>
              <el-input
                v-model="passwordForm.confirmPassword"
                type="password"
                placeholder="请再次输入新密码"
                class="form-input"
                show-password
              ></el-input>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleSave" :loading="saving">提交</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'SettingsDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      activeSection: 0,
      saving: false,
      sections: [
        { title: '个人资料' },
        { title: '用户设置' },
        { title: '修改密码' }
      ],
      userInfo: {
        avatar: '',
        username: '张三',
        nickname: '张三',
        gender: 'female',
        signature: ''
      },
      messageSettings: {
        notification: true,
        sound: true,
        vibration: false
      },
      passwordForm: {
        currentPassword: '',
        newPassword: '',
        confirmPassword: ''
      }
    }
  },
  watch: {
    visible(newVal) {
      if (newVal) {
        this.loadSettings();
      }
    }
  },
  methods: {
    loadSettings() {
      // 从本地存储或API加载设置
      const savedSettings = localStorage.getItem('userSettings');
      if (savedSettings) {
        const settings = JSON.parse(savedSettings);
        this.userInfo = { ...this.userInfo, ...settings.userInfo };
        this.messageSettings = { ...this.messageSettings, ...settings.messageSettings };
        this.privacySettings = { ...this.privacySettings, ...settings.privacySettings };
        this.systemSettings = { ...this.systemSettings, ...settings.systemSettings };
      }
    },
    handleSave() {
      this.saving = true;
      
      // 模拟保存到服务器
      setTimeout(() => {
        // 保存到本地存储
        const settings = {
          userInfo: this.userInfo,
          messageSettings: this.messageSettings,
          privacySettings: this.privacySettings,
          systemSettings: this.systemSettings
        };
        localStorage.setItem('userSettings', JSON.stringify(settings));
        
        this.saving = false;
        this.$message.success('设置保存成功！');
        this.handleClose();
      }, 1000);
    },
    handleClose() {
      this.$emit('update:visible', false);
    }
  }
}
</script>

<style scoped>
/* 对话框整体样式 */
.settings-dialog .el-dialog__body {
  padding: 0;
}

.settings-dialog .el-dialog__header {
  padding: 20px 24px 0;
  border-bottom: 1px solid #e8eaed;
}

.settings-dialog .el-dialog__title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

/* 主容器 */
.settings-container {
  display: flex;
  height: 400px;
  background: #ffffff;
}

/* 左侧导航栏 */
.settings-sidebar {
  width: 150px;
  background: #ffffff;
  border-right: 1px solid #e8eaed;
  padding: 16px 0;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
  font-size: 13px;
  color: #606266;
  position: relative;
}

.nav-item:hover {
  background: #f5f7fa;
  color: #409EFF;
}

.nav-item.active {
  background: #ecf5ff;
  color: #409EFF;
  border-left-color: #409EFF;
  font-weight: 500;
}

/* 右侧主内容区 */
.settings-main {
  flex: 1;
  background: #ffffff;
  overflow: hidden;
}

.settings-panel {
  height: 100%;
  padding: 20px;
  overflow-y: auto;
}

/* 表单区域 */
.form-section {
  max-width: 400px;
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

.form-label.required::after {
  content: '*';
  color: #f56c6c;
  margin-left: 4px;
}

.form-input,
.form-textarea {
  width: 100%;
}

/* 头像设置 */
.avatar-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar {
  border: 2px solid #e4e7ed;
  transition: all 0.3s ease;
}

.user-avatar:hover {
  border-color: #409EFF;
}

.avatar-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 性别选择 */
.gender-group {
  margin-top: 8px;
}

.gender-group .el-radio {
  margin-right: 24px;
}

/* 设置项 */
.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-label {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

/* 底部操作区 */
.dialog-footer {
  text-align: center;
  padding: 16px 20px;
  border-top: 1px solid #e8eaed;
  background: #fafafa;
}

/* 滚动条美化 */
.settings-panel::-webkit-scrollbar {
  width: 6px;
}

.settings-panel::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.settings-panel::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.settings-panel::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 输入框样式优化 */
.form-input .el-input__inner,
.form-textarea .el-textarea__inner {
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  transition: border-color 0.2s ease;
}

.form-input .el-input__inner:focus,
.form-textarea .el-textarea__inner:focus {
  border-color: #409EFF;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

/* 按钮样式 */
.el-button {
  border-radius: 4px;
  font-weight: 500;
}

.el-button--primary {
  background-color: #409EFF;
  border-color: #409EFF;
}

.el-button--primary:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

/* 开关样式 */
.el-switch.is-checked .el-switch__core {
  background-color: #409EFF;
  border-color: #409EFF;
}

/* 单选框样式 */
.el-radio__input.is-checked .el-radio__inner {
  background-color: #409EFF;
  border-color: #409EFF;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .settings-container {
    flex-direction: column;
    height: auto;
  }
  
  .settings-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #e8eaed;
  }
  
  .nav-item {
    border-left: none;
    border-bottom: 2px solid transparent;
  }
  
  .nav-item.active {
    border-left: none;
    border-bottom-color: #409EFF;
  }
}
</style>
